前端學習筆記

Vue List Rendering

Vue 的列表渲染，使用的指令是 v-for。

繪製陣列內的元素

v-for 指令用來渲染多筆基於陣列的元素。
語法是 item in items。
items 是資料的來源陣列，item 是陣列內的元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

視圖顯示：

  • Foo
  • Bar

v-for 還支持另一個參數(可選)，即陣列內的索引。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

視圖顯示：

  • 0 - Foo
  • 1 - Bar

※ item in items 也可以寫成 item of items。

物件

v-for 也能取出物件內的資料。
根據屬性取出值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

視圖顯示：

  • How to do lists in Vue
  • Jane Doe
  • 2016-04-10

第二個參數(可選)為屬性名(key)。

1
2
3
<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

視圖顯示：

  • title: How to do lists in Vue
  • author: Jane Doe
  • publishedAt: 2016-04-10

同樣有個索引參數。

1
2
3
<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

視圖顯示：

    1. title: How to do lists in Vue
    1. author: Jane Doe
    1. publishedAt: 2016-04-10

在迭代(遍歷)物件時，是依據 Object.keys() 的結果迭代，但要注意這結果在不同的 JavaScript 引擎可能有所不同。

陣列更新

變異方法 (mutation method)

Vue 將被監聽的陣列的變異方法進行了包裹，使他們能夠觸發視圖更新。

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

變異方法：會更改原陣列的方法。
<mutate the original array they are called on.>

替換陣列 (non-mutating method)

  • filter()
  • concat()
  • slice()

物件更新

若非實體創建時就已經存在於 data 中的屬性，是無法響應式的更新的。
如果想要更動一個物件內的屬性，則需使用 set 方法。

1
2
3
4
5
6
7
var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

使用 Vue.set(object, propertyName, value) 增加一個 age 屬性到 userProfile 物件裡

1
Vue.set(vm.userProfile, 'age', 27)

或是用 vm.$set 

1
vm.$set(vm.userProfile, 'age', 27)

或是用 Object.assign() 增加多個屬性

1
2
3
4
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

顯示過濾/排序後的結果

若是不想改變原始數據，可以使用計算屬性或方法來返回處理過的陣列。

計算屬性

1
2
3
4
5
6
7
8
9
10
11
12
<li v-for="n in evenNumbers"> {{ n }} </li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

方法

有時計算屬性並不適用(e.g. inside nested v-for loops)，則可以用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul v-for="set in sets">
  <li v-for="n in even(set)"> {{ n }} </li>
</ul>

data: {
  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

接收整數

v-for 也可以接受整數，並且會重複接受的整數次數。

1
2
3
<div>
  <span v-for="n in 10"> {{ n }} </span>
</div>

結果：
1 2 3 4 5 6 7 8 9 10

# Vue, w3HexSchool
Vue Event Handling
Vue Conditional Rendering
追蹤

目錄

最新文章

分類

標籤

JavaScript 1
Vue 11
w3HexSchool 11

最新文章

分類

標籤

JavaScript 1
Vue 11
w3HexSchool 11
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×